<template>
  <div>
    <el-dialog
      title="填写验证码"
      :visible.sync="dialogCaptchaVisible"
      :close-on-click-modal="false"
      :show-close="false"
      @close="handleClose()"
      @open="getNewCaptcha()"
      width="500px"
    >
    <!-- TODO -->
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="70px"
        class="demo-ruleForm"
        hide-required-asterisk
      >
        <el-form-item label="验证码" prop="captcha">
          <el-input
            v-model="form.captcha"
            autocomplete="off"
            placeholder="单击图片更新验证码"
          >
            <img
              :src="captchaUrl"
              alt="验证码"
              @click="getNewCaptcha()"
              slot="append"
              title="单击图片更新验证码"
              class="captcha-img"
            />
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="checkCaptch()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import captcha from "@/api/us/captcha";
import { validEmail } from "@/utils/validate";
import { env } from "process";
export default {
  name: "GraphCaptcha",
  props: {
    account: {
      type: String,
      default: "",
    },
    dialogCaptchaVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_API,
      captchaUrl: "",
      form: {
        captcha: undefined,
      },
      rules: {
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleClose() {
      this.$emit('closeDialog')
    },
    isEmailorSms(account) {
      if (validEmail(account)) {
        return true
      } else {
        return false
      }
    },
    // TODO
    getNewCaptcha() {
      const account = this.account
        // this.captchaForm.captchaUrl = `http://222.16.28.242:8080/captcha/graphic/get?account=${account}&time=${Date.now()}`
      this.captchaUrl = this.BASE_URL + `/captcha/graphic/get?account=${account}&time=${Date.now()}`
    },
    // 手机验证码发送
    sendSmsCaptcha(account, code) {
       this.$message.success('正在发送验证码')
      captcha.sendSmsCaptcha(account, code)
        .then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg)
            this.$emit('countdown')
          }
        })
    },
    sendEmailCaptcha(account, code) {
      this.$message.success('正在发送验证码')
      captcha.sendEmailCaptcha(account, code).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg)
          this.$emit('countdown')
        }
      })
    },
    checkCaptch() {
      const account = this.account
      const code = this.form.captcha
      captcha.checkGraphicCaptcha(account, code)
        .then(res => {
          if (res.code == 200) {
            this.handleClose()
            if (this.isEmailorSms(account)) {
              this.sendEmailCaptcha(account, code)
            } else {
              this.form.captcha = undefined
              this.sendSmsCaptcha(account, code)
            }
          }
        })
    },
  }
};
</script>

<style lang="scss" scoped>
.captcha-img {
  width: 100px;
}
</style>